import React, { Component } from 'react'
import { Select } from 'antd'
import type { ColumnsType } from 'antd/es/table';
import { Table } from 'antd';
import './Leave.css'
// 时间组件导入
import type { DatePickerProps, } from 'antd';
import { DatePicker, Space } from 'antd';
import service from '../../../utils/service';
// 时间定义
const { Option } = Select;

interface DataType {
  department: any;
  name: any;
  start: any;
  end: any;
  types: any;
  time: any;
  sta: any;
  operation: any
  rove: any
}


export default class Approve extends Component<any, any> {
  constructor(props: any) {
    super(props)
    this.state = {
      arr1: [],
      ks: '',
      js: '',
      qjlx: '',
      spzt: ''
    }
  }
  // tab表格数据
  columns: ColumnsType<DataType> = [
    {
      title: '部门',
      dataIndex: 'division',
      width: 120,
      align: 'center',

    },
    {
      title: '姓名',
      dataIndex: 'xm',
      width: 120,
      align: 'center',
    },
    {
      title: '开始时间',
      dataIndex: 'start',
      width: 180,
      align: 'center',
    },
    {
      // 写mock数据，1代表单屏，2代表双屏。用三目判断
      title: '结束时间',
      dataIndex: 'end',
      width: 180,
      align: 'center',
    },
    {
      title: '请假类型',
      dataIndex: 'caus',
      width: 120,
      align: 'center',
    },
    {
      title: '申请时间',
      dataIndex: 'start',
      width: 180,
      align: 'center',
    },
    {
      title: '审批状态',
      dataIndex: 'rove',
      width: 150,
      align: 'center',
      render: (text, record, index) => (
        <div>
          <p style={{ color: '#FF6600' }}>{record.rove}</p>
        </div>
      )
    },
    {
      title: '操作',
      dataIndex: 'operation',
      width: 180,
      align: 'center',
      render: (text, record, index) => (
        <div>
          <button className='ljsp' onClick={() => this.sp(text, record, index)}>立即审批</button>
        </div>
      )
    },
  ];

  // 发请求获取tab表格数据,这里获取的是待审批的数据
  componentDidMount(): void {
    service({
      url: '/teacher',
      params: {
        rove: '待审批'
      }
    }).then(res => {
      this.setState({
        arr1: res.data
      })
    })
  }
  // 跳到请假审批组件，并传参
  sp = (text: any, record: any, index: any) => {
    this.props.history.push({ pathname: '/Main/Immediately', query: { record } })
  }

  apply = () => {
    this.props.history.push('/Main/Apply')
  }
  // 绑定事件进行查询
  ser = () => {
    console.log('11')
    if (this.state.ks) {
      service({
        url: '/teacher',
        method: 'get',
        params: {
          start: this.state.ks,
          rove: '待审批'
        }
      }).then(res => {
        this.setState({
          arr1: res.data
        })
      })
    } else if (this.state.js) {
      service({
        url: '/teacher',
        method: 'get',
        params: {
          end: this.state.js,
          rove: '待审批'
        }
      }).then(res => {
        this.setState({
          arr1: res.data
        })
      })
    } else  if (this.state.qjlx) {
      service({
        url: '/teacher',
        method: 'get',
        params: {
          caus: this.state.qjlx,
          rove: '待审批'
        }
      }).then(res => {
        this.setState({
          arr1: res.data
        })
      })
    }

  }
  // 绑定事件进行重置
  rep = () => {
    console.log('11')
    service({
      url: '/teacher',
      params: {
        rove: '待审批'
      }
    }).then(res => {
      this.setState({
        arr1: res.data
      })
    })
  }
  render() {
    return (
      <div>
        <div className='box1'>
          <Space direction="vertical" style={{ marginTop: '30px', marginLeft: '30px' }}>
            <DatePicker placeholder='申请时间' onChange={(date, dateString) => { this.setState({ ks: dateString }) }} />
          </Space>
          <Space direction="vertical" style={{ marginTop: '30px', marginLeft: '30px' }}>
            <DatePicker placeholder='结束时间' onChange={(date, dateString) => { this.setState({ js: dateString }) }} />
          </Space>
          <Select allowClear style={{ width: '142px', marginLeft: '20px' }} placeholder="请假类型" onSelect={(value) => { this.setState({ qjlx: value }) }}>
            <Option value="事假">事假</Option>
            <Option value="病假">病假</Option>
            <Option value="调休">调休</Option>
            <Option value="产假">产假</Option>
            <Option value="陪产假">陪产假</Option>
            <Option value="婚假">婚假</Option>
            <Option value="丧假">丧假</Option>
          </Select>
          <button className='cx' onClick={this.ser}>查 询</button>
          <button className='cz' onClick={this.rep}>重 置</button>
          <div className='sj' >
            <p className='sjwz'>查询结果：共计<span style={{ color: '#1890FF' }}> {this.state.arr1.length} </span>条数据</p>
          </div>
          <div style={{ marginTop: '20px' }}>
            <Table columns={this.columns} dataSource={this.state.arr1} pagination={{ pageSize: 10 }} scroll={{ y: 460 }} bordered={true} />
          </div>
        </div>
      </div>
    )
  }
}
